<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="../../build/dist/css/bsui_all.css">
    <title>Document</title>
    <style>
        form {width:900px; margin:50px auto;}

        
        
        .bsui-droplist {position: relative; display: inline-block;}
        .bsui-droplist > i {position:absolute; top:calc(50% - 1em / 2); right:5px; transition:all .3s;}
        .bsui-droplist > .bsui-input {padding-right:22px; -webkit-user-select: none; user-select: none;}
        .bsui-droplist > .bsui-input:focus + i {transform: rotate(180deg);}
        .bsui-droplist > .bsui-input:focus + i + dl {display: block;}
        .bsui-droplist-cont {position: absolute; display:none; min-width: calc(100% - 2px); padding: 5px 0; margin-top: 3px; white-space: nowrap; background: #fff; border: 1px solid #adbdc7; border-radius: 2px; box-shadow: 0 2px 4px rgba(0,0,0,.125), 0 0 6px rgba(0,0,0,.04);}
        .bsui-droplist-cont > dt,
        .bsui-droplist-cont > dd {padding: 0 1em;}
        .bsui-droplist-cont > dt {color: #909da5; cursor: text;}
        .bsui-droplist-cont > dt + dd,
        .bsui-droplist-cont > dt + dd + dd {padding: 0 2em;}
        dd:hover {color:#fff; background: #009dff;}
    </style>
</head>
<body>
    <form action="#" method="post">     
    <p>&nbsp;</p>
        <select class="bsui-select">
            <optgroup label="水果">
                <option>苹果</option>
                <option disabled>香蕉</option>
                <option>梨</option>
                <option>葡萄</option>
                <option>西瓜</option>
            </optgroup>
            <optgroup label="蔬菜">
                <option>西兰花</option>
                <option>茄子</option>
                <option>西红柿</option>
            </optgroup>
        </select>
        <select class="bsui-select">
            <option>苹果</option>
            <option>香蕉</option>
            <option>西兰花</option>
        </select>
        <!-- <label class="bsui-droplist">
            <input class="bsui-input" type="text" placeholder="请选择" value="苹果" readonly>
            <i class="bsui-icon-chevron-down"></i>
            <dl class="bsui-droplist-cont" style="position:absolute">
                <dt>水果</dt>
                <dd>苹果</dd>
                <dd disabled>香蕉</dd>
                <dt>蔬菜</dt>
                <dd>西兰花</dd>
                <dd>超长的测试项目就问你怕不怕</dd>
            </dl>
        </label>
        <label class="bsui-droplist">
            <input class="bsui-input" type="text" placeholder="请选择" value="苹果" readonly>
            <i class="bsui-icon-chevron-down"></i>
            <dl class="bsui-droplist-cont" style="position:absolute">
                <dd>苹果</dd>
                <dd disabled>香蕉</dd>
                <dd>西兰花</dd>
                <dd>超长的测试项目就问你怕不怕</dd>
            </dl>
        </label> -->
        <select class="bsui-select" size="2" multiple>
            <option>菠萝蜜</option>
            <option>大西瓜</option>
            <option>小芝麻</option>
        </select>
    </form>
</body>
</html>